/**
 * 教育背景编辑
 */
import Forms from '@/components/Form/index.jsx';
import { useState, useEffect } from 'react';
import RichText from '@/components/richText';
import styles from '../index.less';
import { Button } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { antiShake, store, updateTool, uuid } from '@/components';
const options = [
  {
    label: '学校名称',
    prop: 'schoolName',
    type: 'Input',
  },
  {
    label: '所学专业',
    prop: 'major',
    type: 'Input',
  },
  {
    label: '就读时间',
    prop: 'readTime',
    type: 'RangePicker',
    attrs: {
      style: {
        width: '250px',
      },
    },
  },
  {
    label: '学历',
    prop: 'educationalBackground',
    type: 'Select',
    attrs: {
      options: [
        {
          label: '初中',
          value: '初中',
        },
        {
          label: '高中',
          value: '高中',
        },
        {
          label: '大专',
          value: '大专',
        },
        {
          label: '本科',
          value: '本科',
        },
        {
          label: '硕士',
          value: '硕士',
        },
        {
          label: 'MBA',
          value: 'MBA',
        },
        {
          label: 'EMBA',
          value: 'EMBA',
        },
        {
          label: '博士',
          value: '博士',
        },
        {
          label: '不填',
          value: 'notFilledIn',
        },
      ],
    },
  },
];
const App = () => {
  const UUID = uuid();
  const [num, setNum] = useState([UUID]);
  const [data, setData] = useState({
    [UUID]: {
      formValue: {},
      explain: '',
    },
  });
  /**
   * 添加一个学历的逻辑
   */
  const addItem = () => {
    const _uuid = uuid();
    setNum([...num, _uuid]);
    setData({
      ...data,
      [_uuid]: {
        formValue: {},
        explain: '',
      },
    });
  };
  /**
   * 删除一个学历的逻辑
   */
  const deleteItem = (key) => {
    setNum(num.filter((ele) => ele !== key));
    const _data = { ...data };
    delete _data[key];
    setData(_data);
  };
  useEffect(() => {
    console.log(data, 'data');
    store.dispatch(
      'EDUCATIONAL',
      Object.keys(data).map((ele) => data[ele]),
    );
    updateTool.updated('content');
  }, [data]);
  return (
    <div className={styles.education}>
      {num.map((ele, i) => {
        return (
          <section className={styles.educationItem} key={i}>
            <Forms
              name={'form' + ele}
              options={options}
              onChange={(e) => {
                setData({
                  ...data,
                  [ele]: {
                    ...data[ele],
                    formValue: e,
                  },
                });
              }}
            />
            <div className={styles.RichText}>
              <RichText
                value={data[ele].explain}
                setValue={(e) => {
                  setData({
                    ...data,
                    [ele]: {
                      ...data[ele],
                      explain: e,
                    },
                  });
                }}
              />
            </div>
            <span
              className={styles.delIcon}
              style={{ display: num.length > 1 ? '' : 'none' }}
              onClick={() => deleteItem(ele)}
            >
              <DeleteOutlined />
            </span>
          </section>
        );
      })}

      <div className={styles.educationAdd}>
        <Button icon={<PlusOutlined />} type="primary" onClick={addItem}>
          添加一条学历信息
        </Button>
      </div>
    </div>
  );
};
export default App;
